<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="favicon.ico" />
        <title>&lrm;</title>
        <style>
            html {
                font-size: calc(100vw / 375);
            }
            * {
                padding: 0;
                margin: 0;
                user-select: none;
                outline: none;
                font-family: PingFangSC-Regular, PingFang SC;
            }
            .main {
                background-color: #f2f2f2;
                text-align: center;
                height: 100vh;
                overflow: hidden;
            }
            .weichat {
                width: 64rem;
                height: 64rem;
                display: block;
                margin: 100rem auto 16rem;
            }
            .title {
                font-size: 22rem;
                font-weight: 600;
                margin-bottom: 8rem;
            }
            .desc {
                font-size: 14rem;
                font-weight: 400;
                margin-bottom: 60rem;
            }
            .btn {
                background: #07c160;
                color: #fff;
                text-decoration: none;
                font-size: 16rem;
                font-weight: 600;
                width: 184rem;
                height: 40rem;
                line-height: 40rem;
                display: block;
                margin: 0 auto;
                border-radius: 8rem;
            }
            .light-btn {
                visibility: hidden;
                margin-top: 16px;
                color: #07c160;
                background-color: rgba(7, 193, 96, 0.12);
            }
            .btn:active {
                opacity: 0.7;
            }
            .loading-body {
                position: fixed;
                z-index: 10;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                align-items: center;
                justify-content: center;
                display: none;
            }
            .loading {
                background: rgba(0, 0, 0, 0.6);
                color: #fff;
                width: 136rem;
                border-radius: 8rem;
                padding: 30rem 0;
            }
            .loading > img {
                width: 40rem;
                height: 40rem;
                display: block;
                animation: load 1s infinite;
                -webkit-animation: load 1s infinite;
                display: block;
                margin: 0 auto 14rem;
            }
            .loading > span {
                font-size: 16rem;
            }
            @keyframes load {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(369deg);
                }
            }
            @-webkit-keyframes load {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(369deg);
                }
            }
            .toast-body {
                position: fixed;
                z-index: 11;
                display: flex;
                align-items: center;
                justify-content: center;
                top: 50%;
                left: 0;
                right: 0;
                height: 0;
                display: none;
            }
            .toast {
                background: rgba(0, 0, 0, 0.6);
                color: #fff;
                border-radius: 8rem;
                font-size: 16rem;
                height: 32rem;
                line-height: 32rem;
                padding: 0 10rem;
            }
        </style>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    <body>
        <div class="main">
            <img
                class="weichat"
                src=""
            />
            <p class="title">请授权头像昵称</p>
            <p class="desc" id="desc">便于商家识别付款人，发货、售后更高效</p>
            <a class="btn" id="a-auth" href="javascript:void(0);" onClick="showBtn()">去授权</a>
            <a class="btn light-btn" id="jump-auth" href="javascript:void(0);">跳过授权</a>
            <div id="loading" class="loading-body">
                <p class="loading">
                    <img
                        class="img"
                        src=""
                    />
                    <span>请稍等...</span>
                </p>
            </div>
            <div id="toast" class="toast-body">
                <p class="toast"></p>
            </div>
        </div>
        <script>
            function getQueryVariable(variable, search) {
                var s = search || window.location.search;
                var value = '';
                var query = s.substring(1);
                var vars = query.split('&');
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split('=');
                    if (pair[0] === variable) {
                        value = pair[1] || '';
                        break;
                    }
                }
                return value;
            }
            function showToast(title, callback) {
                var dom = document.getElementById('toast');
                if (dom && dom.children && dom.children.length > 0) {
                    dom.children[0].innerHTML = title;
                    dom.style.display = 'flex';
                    setTimeout(() => {
                        dom.style.display = 'none';
                        typeof callback === 'function' && callback();
                    }, 3000);
                }
            }
            function showLoading() {
                var dom = document.getElementById('loading');
                if (dom) dom.style.display = 'flex';
            }
            function hideLoading() {
                var dom = document.getElementById('loading');
                if (dom) dom.style.display = 'none';
            }

            /*网络请求*/
            var http = {
                get: function (url, data, complete) {
                    url = url + '?time=' + new Date().getTime();
                    for (var item in data) {
                        if (data[item] !== null) {
                            url = url + '&' + item + '=' + data[item];
                        }
                    }
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function (e) {
                        if (xhr && xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                typeof complete == 'function' &&
                                    complete(JSON.parse(xhr.responseText));
                            } else {
                                typeof complete == 'function' &&
                                    complete({ code: 300, message: '请求失败了，请重试。' });
                            }
                        }
                    };
                    xhr.open('GET', url, true);
                    xhr.withCredentials = true;
                    xhr.crossDomain = true;
                    xhr.send();
                },
                post: function (url, data, complete) {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function (e) {
                        if (xhr && xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                typeof complete == 'function' &&
                                    complete(JSON.parse(xhr.responseText));
                            } else {
                                typeof complete == 'function' &&
                                    complete({ code: 300, message: '请求失败了，请重试。' });
                            }
                        }
                    };
                    xhr.open('POST', url, true);
                    xhr.withCredentials = true;
                    xhr.crossDomain = true;
                    xhr.send(JSON.stringify(data));
                }
            };

            var code = getQueryVariable('code');
            var type = getQueryVariable('type');
            var status = getQueryVariable('status') || sessionStorage.getItem('web-auth-status');
            var origin = window.location.origin;
            var redirectUri = encodeURIComponent(
                origin + '/auth.html?type=' + type + '&status=' + status
            );
            var appid = 'wx09e4568bbc2d5abf';
            if (origin.indexOf('www.redgang.cn') >= 0) {
                appid = 'wx4f4d4c264fa5ef90';
            }
            if (type === 'transfer') {
                document.getElementById('desc').innerText = '便于转账人识别你的身份信息';
            } else if (type === 'team') {
                document.getElementById('desc').innerText = '便于团队成员识别你的身份';
            }

            function showBtn() {
                setTimeout(() => {
                    document.getElementById('jump-auth').style.visibility = 'visible';
                }, 3000)
                sessionStorage.setItem('web-auth-status', 'jumpAuth');
                var url =
                    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                    appid +
                    '&redirect_uri=' +
                    redirectUri +
                    '&response_type=code&scope=snsapi_userinfo&state=' +
                    appid +
                    '#wechat_redirect';
                document.getElementById('a-auth').href = url;
            }

            // 判断是否已经授权过，再次点进来时，直接显示跳过授权
            document.getElementById('jump-auth').style.visibility =
                status === 'authSuccess' || status === 'jumpAuth' ? 'visible' : 'hidden';
            // 回传标识给小程序
            document.getElementById('jump-auth').onclick = function () {
                wx.miniProgram.postMessage({
                    data: { type: 'auth', content: 'jumpAuth' }
                });
                setTimeout(() => {
                    wx.miniProgram.navigateBack();
                }, 100);
            };

            if (code) {
                var url = origin + '/core/user/login/official/officialAuth';
                showLoading();
                http.post(
                    url,
                    {
                        jsCode: code
                    },
                    function (res) {
                        hideLoading();
                        if (res.code === 0) {
                            // 回传标识给小程序
                            wx.miniProgram.postMessage({
                                data: { type: 'auth', content: 'authSuccess' }
                            });
                            setTimeout(() => {
                                wx.miniProgram.navigateBack();
                            }, 100);
                        } else {
                            showToast(res.message);
                        }
                    }
                );
            }
        </script>
    </body>
</html>
